<template>
  <van-rate class="mt-van-rate"
            :readonly="disabled"
            :color="activeColor"
            :void-color="voidColor"
            :value="curValue"
            :disabled-color="disabledColor"
            @change="onChange"></van-rate>
</template>

<script>
  export default {
    behaviors: [
      'wx://form-field',
    ],
    properties: {
      disabled: {
        type: Boolean,
        value: false
      },
      defaultValue: {
        type: null,
        value: null,
        observer(newVal) {
          if (this.data.disabled) {
            this.setData({
              value: newVal,
              curValue: newVal,
            })
          }
        }
      }
    },
    data() {
      return {
        icon: 'http://oss.kaoyanvip.cn/uploads/file1546928976976.png',
        activeColor: '#ffd834',
        voidColor: '#ececec',
        disabledColor: '#ececec',
        curValue: null,
      }
    },
    attached() {
    },
    methods: {
      onChange(e) {
        this.setData({
          value: e.detail,
          curValue: e.detail
        })
      },
    },
  }
</script>

<style lang="less">
</style>
